---
title: Select
editUrl: https://github.com/toolbeam/openauth/blob/master/packages/openauth/src/ui/select.tsx
description: Reference doc for the `Select` UI.
---

import { Segment, Section, NestedTitle, InlineSection } from 'toolbeam-docs-theme/components'
import { Tabs, TabItem } from '@astrojs/starlight/components'

<div class="tsdoc">
<Section type="about">
The UI that's displayed when loading the root page of the OpenAuth server. You can configure
which providers should be displayed in the select UI.

```ts
import { Select } from "@openauthjs/openauth/ui/select"

export default issuer({
  select: Select({
    providers: {
      github: {
        hide: true
      },
      google: {
        display: "Google"
      }
    }
  })
  // ...
})
```
</Section>
---
## Methods
### Select
<Segment>
<Section type="signature">
```ts
Select(props?)
```
</Section>
<Section type="parameters">
#### Parameters
- <p><code class="key">props?</code> [<code class="type">SelectProps</code>](#selectprops)</p>
</Section>
<InlineSection>
**Returns** <code class="primitive">(providers: <code class="primitive">Record</code><code class="symbol">&lt;</code><code class="primitive">string</code>, <code class="primitive">string</code><code class="symbol">&gt;</code>, _req: <code class="type">Request</code>) => <code class="primitive">Promise</code><code class="symbol">&lt;</code><code class="type">Response</code><code class="symbol">&gt;</code></code>
</InlineSection>
</Segment>
## SelectProps
<Segment>
<Section type="parameters">
- <p>[<code class="key">providers?</code>](#selectprops.providers) <code class="primitive">Record</code><code class="symbol">&lt;</code><code class="primitive">string</code>, <code class="primitive">Object</code><code class="symbol">&gt;</code></p>
  - <p>[<code class="key">display?</code>](#providers[].display) <code class="primitive">string</code></p>
  - <p>[<code class="key">hide?</code>](#providers[].hide) <code class="primitive">boolean</code></p>
</Section>
</Segment>
<NestedTitle id="selectprops.providers" Tag="h4" parent="SelectProps.">providers?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">Record</code><code class="symbol">&lt;</code><code class="primitive">string</code>, <code class="primitive">Object</code><code class="symbol">&gt;</code>
</InlineSection>
</Section>
An object with all the providers and their config; where the key is the provider name.
```ts
{
  github: {
    hide: true
  },
  google: {
    display: "Google"
  }
}
```
</Segment>
<NestedTitle id="providers[].display" Tag="h5" parent="SelectProps.providers[].">display?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>
The display name of the provider.
</Segment>
<NestedTitle id="providers[].hide" Tag="h5" parent="SelectProps.providers[].">hide?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">boolean</code>
</InlineSection>
</Section>

<InlineSection>
**Default** false
</InlineSection>
Whether to hide the provider from the select UI.
</Segment>
</div>